// pages/shijihai/nuit5/case5-7-3/case5-7-3.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        pen:5,
        color:'#000000'
    },
    isClear:false,
    onLoad:function () {
        this.ctx=wx.createAudioContext('myCanvas', this);
    },
    touchStart:function (e) {
        this.x1=e.changeTouches[0].x;
        this.y2=e.changeTouches[0].y;
        if(this.isClear) {
            this.ctx.setStrokeStyle('#FFFFFF');
            this.ctx.setLineCap('round');
            this.ctx.setLineJoin('round');
            this.ctx.setLineWidth(20);
            this.ctx.beginPath();
        } else {
            this.ctx.setStrokeStyle(this.data.color);
            this.ctx.setLineWidth(this.data.pen);
            this.ctx.setLineCap('round');
            this.ctx.beginPath();
        }
    },
    touchMove:function (e) {
        var x1=e.changeTouches[0].x;
        var y1=e.changeTouches[0].y;
        if(this.isClear) {
            this.ctx.save();
            this.ctx.movrTo(this.x1,this.y1);
            this.ctx.lineTo(x2,y2);
            this.ctx.stroke();
            this.x1=x2;
            this.y1=y2;
        } else {
            this.ctx.movrTo(this.x1,this.y1);
            this.ctx.lineTo(x2,y2);
            this.ctx.stroke();
            this.x1=x2;
            this.y1=y2;
        }
        this.ctx.draw(true);
    },
    touchEnd:function () {},
    penSelect:function (e) {
        this.setData({
            pen:parseInt(e.currentTarget.dataset.param)
        })
        this.isClear=false;
    },
    colorSelect:function (e) {
        console.log(e.currentTarget);
        this.setData({
            color:e.currentTarget.dataset.param
        });
        this.isClear=false;
    },
    clear:function () {
        this.isClear=true;
    },
    clearAll:function () {
        this.setData({
            pen:5,
            color:'#000000'
        })
        this.ctx.draw();
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})